<template>
  <div class="container">
    <Breadcrumb
      :items="['menu.produce', 'menu.visualization.wineproduction']"
    />
    <a-card direction="vertical" :size="12" fill :title="`产量管理`">
      <ProductionSearch
        ref="productionSearchRef"
        :winetypedata="winetypedata"
        :getProducedataInfo="getProducedataInfo"
      />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addProduction">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
            <a-tooltip content="当前截至数据总数">
              <div class="action-icon" @click="getProducedataInfo(1)"
                >（总计{{ pagination.total }}条数据）</div
              >
            </a-tooltip>
            <a-tooltip :content="$t('searchTable.actions.refresh')">
              <div class="action-icon" @click="getProducedataInfo(1)"
                ><icon-refresh size="18"
              /></div>
            </a-tooltip>
          </a-space>
        </a-col>
        <a-col
          :span="12"
          style="display: flex; align-items: center; justify-content: end"
        >
          <a-button>
            <template #icon>
              <icon-download />
            </template>
            {{ $t('searchTable.operation.download') }}
          </a-button>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data="productiondata"
        :loading="formLoading"
        size="large"
        :pagination="pagination"
        @page-change="handlePageChange"
        :bordered="{ wrapper: true, cell: true }"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <template #winetype_id="{ record }">
          <span>{{ getWineName(record.winetype_id) }}</span>
        </template>
        <template #produce_time="{ record }">
          <span>{{ dayjs(record.produce_time).format('MM-DD') }}</span>
        </template>
        <template #product_type="{ record }">
          <span class="circle" v-if="record.product_type === '1'"></span>
          <span class="circle pass" v-else></span>
          {{ record.product_type === '2' ? '未入库' : '已入库' }}
        </template>
        <template #product_costom="{ record }">
          <span class="circle" v-if="record.product_costom === '0'"></span>
          <span class="circle pass" v-else></span>
          {{ record.product_costom === '1' ? '是' : '否' }}
        </template>
        <template #winetype_speci="{ record }">
          {{ getwineNameSpeci(record.winetype_id) }}
        </template>
      </a-table>
    </a-card>
    <ProductiondataDialog
      ref="productiondataDialog"
      :winetypedata="winetypedata"
      :getProducedataInfo="getProducedataInfo"
    />
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';
import ProductiondataDialog from './components/productiondataDialog.vue';
import { getWineTypeList } from '@/api/winetype';
import { getProducedataList } from '@/api/producetion';
import ProductionSearch from './components/productionSearch.vue';
import dayjs from 'dayjs';

const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
});
const productionSearchRef = ref();
const productiondataDialog = ref();
const winetypedata = ref([]); // 酒类列表
const productiondata = ref([]);
const formLoading = ref(false);
// 获取酒类名称
const getWineName = (winetype_id) => {
  let wineInfo = initWineTypeList.value.find(
    (item) => item.wine_id === winetype_id
  );
  if (wineInfo) {
    return wineInfo.wine_name;
  }
  return '';
};
const handlePageChange = (page) => {
  getProducedataInfo(page);
};
// 获取酒类规格
const getwineNameSpeci = (winetype_id) => {
  let wineInfo = initWineTypeList.value.find(
    (item) => item.wine_id === winetype_id
  );
  if (wineInfo) {
    return `${wineInfo.wine_alcohol}%/${wineInfo.wine_case}瓶/箱`;
  }
  return '';
};
// 打开新增界面
const addProduction = () => {
  productiondataDialog.value.openDialog();
};
// 获取酒类列表
const getProducedataInfo = async (cuttent) => {
  formLoading.value = true;
  productiondata.value = [];
  let searchFrom = {};
  if (productionSearchRef.value && productionSearchRef.value.form) {
    searchFrom = JSON.parse(JSON.stringify(productionSearchRef.value.form));
    if (
      productionSearchRef.value.form.produce_time &&
      productionSearchRef.value.form.produce_time.length > 0
    ) {
      searchFrom.prouct_beginTime =
        productionSearchRef.value.form.produce_time[0];
      searchFrom.product_endTime =
        productionSearchRef.value.form.produce_time[1];
    } else {
      searchFrom.prouct_beginTime = '';
      searchFrom.product_endTime = '';
    }
    delete searchFrom.produce_time;
  }
  if (typeof cuttent === 'number' && cuttent) {
    searchFrom.current = cuttent;
  } else {
    searchFrom.current = 1;
  }
  pagination.current = searchFrom.current;
  const { data, code } = await getProducedataList(searchFrom);
  if (code === 200) {
    formLoading.value = false;
    pagination.total = data.total;
    if (data.records.length > 0) {
      productiondata.value = data.records;
    }
  }
};
const initWineTypeList = ref([]);
// 获取酒类列表
const getWineTypeDataList = async () => {
  const { data, code } = await getWineTypeList();
  if (code === 200) {
    winetypedata.value = [];
    initWineTypeList.value = data;
    data.forEach((item) => {
      let winetypeInfo = {
        winetype_id: item.wine_id,
        wine_name: `${item.wine_name}(${item.wine_alcohol}%,${item.wine_case}瓶/箱)`,
        wine_case: item.wine_case,
      };
      winetypedata.value.push(winetypeInfo);
    });
  }
};
nextTick(() => {
  getWineTypeDataList(); // 获取酒类列表
  getProducedataInfo(); // 获取产量数据
});

const columns = ref([
  {
    title: '#',
    dataIndex: 'index',
    slotName: 'index',
  },
  {
    title: '酒类',
    slotName: 'winetype_id',
  },
  {
    title: '规格',
    slotName: 'winetype_speci',
  },
  {
    title: '生产日期',
    slotName: 'produce_time',
  },
  {
    title: '产量/箱',
    dataIndex: 'produce_box',
  },
  {
    title: '产量/瓶',
    dataIndex: 'produce_bottle',
  },
  {
    title: '批次',
    dataIndex: 'product_batch',
  },
  {
    title: '是否定制',
    slotName: 'product_costom',
  },
  {
    title: '是否入库',
    slotName: 'product_type',
  },
  {
    title: '备注',
    dataIndex: 'product_remark',
  },
]);
</script>
<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
.space-unit {
  background: white;
}
</style>